<template>
  <!--销售漏斗-->
  <div class="sales">
    <el-row>
      <span ><i class="font-14 el-icon-s-open"></i></span>
      <span class="font-16">销售漏斗</span>
    </el-row>
    <el-row>
      <el-col style="margin: 10px 0">
        <span style="padding: 0 10px">1.请选择负责联系人:</span>
        <el-input v-model="empValue" @input="findEmp" @blur="closeEmp" clearable placeholder="关键字拼音头" size="small" style="width: 800px">
          <el-button @click="findAllEmp(currPage,pageSize)" slot="append" icon="el-icon-search" ></el-button>
        </el-input>
        <el-popover placement="top" width="774" v-model="visible">
          <ul class="cu-ul" v-if="empList != ''">
            <li @click="choiceEmp(item)" v-for="item in empList">{{item.empName}}</li>
          </ul>
          <div style="color: #5d9cec;margin: 5px 0;text-align: center" v-if="empList == ''"><i class="el-icon-warning-outline"/>没有该员工！</div>
        </el-popover>
        <!-- 员工表格dialog-->
        <el-dialog width="30%" title="全部客户" :visible.sync="innerDialog">
          <!--选择客户-->
          <el-table :data="empList2" style="width: 100%">
            <el-table-column prop="empId" label="员工编号" >
            </el-table-column>
            <el-table-column prop="empName" label="员工姓名" >
            </el-table-column>
            <el-table-column label="请选择" >
              <template slot-scope="scope">
                <el-button size="mini" @click="choiceCustomer2(scope.row)" icon="el-icon-check" type="primary" circle style="margin-left: 10px"></el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-row style="margin-top:10px">
            <el-col :span="16">
              <el-pagination layout="prev, pager, next, jumper" :total="totalSize" @current-change="changePage"
                             :current-page.sync="currPage" :page-size="pageSize"></el-pagination>
            </el-col>
          </el-row>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="margin: 10px 0">
        <span style="padding: 0 10px">2.生成:</span>
        <el-button @click="creatData(emp.empId)" size="small">生成阶段分布数据</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col style="margin: 10px 0">
        <span style="padding: 0 10px">3.查看数据:</span>
      </el-col>
    </el-row>
    <!--阶段发布数据表格-->
    <el-row style="padding: 0 10px">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark"
                style="width: 100%" border>
        <el-table-column prop="name" label="阶段" >
        </el-table-column>
        <el-table-column prop="num" label="数量" ></el-table-column>
        <el-table-column prop="minChange" label="转化" ></el-table-column>
        <el-table-column prop="numMedium" label="数量" ></el-table-column>
        <el-table-column prop="mediumChange" label="历史转化" ></el-table-column>
        <el-table-column prop="numMax" label="数量" ></el-table-column>
        <el-table-column prop="maxChange" label="全部平均" ></el-table-column>
        <el-table-column prop="expectSum" label="预估金额" ></el-table-column>
        <el-table-column prop="sum" label="预估金额" ></el-table-column>
        <el-table-column prop="minSum" label="金额转化" ></el-table-column>
        <el-table-column prop="sumMedium" label="预估金额" ></el-table-column>
        <el-table-column prop="mediumSum" label="历史转化" ></el-table-column>
        <el-table-column prop="sumMax" label="预估金额" ></el-table-column>
        <el-table-column prop="maxSum" label="全部平均" ></el-table-column>
      </el-table>
      <el-row>
        <div>说明：</div>
        <div>转化：当前阶段和下一个阶段的百分比。历史转化：全部机会，不过滤机会状态。全局平均：全部成员的机会，不过滤人。</div>
      </el-row>
    </el-row>
    <!--销售漏斗-->
    <el-row>
      <el-col style="margin: 30px 0">
        <span style="padding: 0 10px">4.销售漏斗:</span>
        <div style="margin: 30px 0 0 0">
          <span class="font-14-bold">销售漏斗:</span>
          <span>仅统计<span style="color: red">“状态=跟踪”</span>的销售机会</span>
        </div>
        <div style="margin: 30px 0 0 0">
          <span class="font-14-bold">{{this.selectName}}</span>的销售漏斗
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div style="width: 500px;height:500px;margin: 30px auto 0px" ref="salesChart"></div>
      </el-col>
      <el-col :span="12">
        <div style="width: 500px;height:500px;margin: 30px auto 0px" ref="salesSumChart"></div>
      </el-col>
    </el-row>
  </div>

</template>


<script>export default {
  data (){
    return{
      opportunityAllList: [], // 机会视图集合
      stageList: [],
      stageMediumList: [],
      stageMaxList: [],
      stageDataList: [],
      stageNumList: [],
      stageJsonNumList: [],
      stageJsonSumList: [],
      empValue:'',
      empList:[],
      empList2: [],
      pageSize: 5, // 分页页大小
      currPage: 1, // 当前页码，默认为1
      totalSize: 0, // 总记录数
      emp:{},
      selectName:'',// 当前查询对象
      visible: false,
      innerDialog: false,// 员工dialog
      tableData: [{
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '初期沟通',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '立体评估',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '需求分析',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '方案制定',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '竞争',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '商务谈判',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '合同签约',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }]
    }
  },
  methods:{
    // 查询当前员工
    loginEmp(){
      this.$axios.get('http://localhost:8088/emp')
        .then(v => {
          this.emp = v.data
          if(this.emp.department.deptId !== 1){
            this.selectName = '所属部门'
          }else {
            this.selectName = '全部人员'
          }
        })
        .catch(function (v) {})
    },
    // 查询所有
    initAllData () {
      this.$axios.get('http://localhost:8088/emp-opp-list-all')
        .then(v => {
          this.opportunityAllList = v.data
        })
        .catch(function (v) {})
    },
    // 生成阶段分布
    creatData(val){
      this.tableData= [{
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '初期沟通',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '立体评估',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '需求分析',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '方案制定',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '竞争',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '商务谈判',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }, {
        num: 0,
        numMedium: 0,
        numMax: 0,
        sum:0,
        sumMedium:0,
        sumMax:0,
        name: '合同签约',
        minChange: '',
        mediumChange: '',
        maxChange: '',
        expectSum: '0万',
        minSum: '',
        mediumSum: '',
        maxSum: ''
      }]
      this.stageDataList=[]
      this.stageNumList = []
      this.stageJsonNumList = []
      this.stageJsonSumList = []
      if (this.empValue === ''){
        this.stageAllData ()
        this.selectName = '全部人员'
      }else {
        this.stageMinData(val)
        this.stageMediumData (val)
        this.stageMaxData()
        this.selectName = this.emp.empName
      }
    },
    // 默认查询用户部门状态=跟踪的阶段
    stageData () {
      this.$axios.get('http://localhost:8088/stage-list',)
        .then(v => {
          this.stageList = v.data
          //计算阶段
          this.computeStageSales()
          this.computeAllStage()
          this.computeNumChange()
          this.computeSumChange()
        })
        .catch(function (v) {})
    },
    // 默认查询用户部门全部阶段
    stageOtherData (val) {
      this.$axios.get('http://localhost:8088/stage-other-list',{
        params: {
          empId : val
        }
      })
        .then(v => {
          this.stageMediumList = v.data
          //计算阶段
          //计算员工阶段数量 金额
          this.computeMediumAllStage()
          //计算历史转化
          this.computeMediumNumChange()
          // 计算历史金额转化
          this.computeMediumSumChange()
        })
        .catch(function (v) {})
    },
    // 传入查询用户状态=跟踪的阶段
    stageMinData (val) {
      this.$axios.get('http://localhost:8088/stage-min-list',{
        params: {
          empId : val
        }
       })
        .then(v => {
          this.stageList = v.data
          //计算阶段
          this.computeStageSales()
          this.computeAllStage()
          this.computeNumChange()
          this.computeSumChange()
        })
        .catch(function (v) {})
    },
    // 传入查询用户的所有阶段
    stageMediumData (val) {
      this.$axios.get('http://localhost:8088/stage-medium-list',{
        params: {
          empId : val
        }
      })
        .then(v => {
          this.stageMediumList = v.data
          //计算员工阶段数量 金额
          this.computeMediumAllStage()
          //计算历史转化
          this.computeMediumNumChange()
          // 计算历史金额转化
          this.computeMediumSumChange()
        })
        .catch(function (v) {})
    },
    // 查询所有阶段
    stageMaxData () {
      this.$axios.get('http://localhost:8088/stage-max-list')
        .then(v => {
          this.stageMaxList = v.data
          //计算全部阶段数量 金额
          this.computeMaxAllStage()
          this.computeMaxNumChange()
          this.computeMaxSumChange()
        })
        .catch(function (v) {})
    },
    // 查询全部数据
    stageAllData () {
      this.$axios.get('http://localhost:8088/stage-max-list')
        .then(v => {
          this.stageMaxList = v.data
          this.stageList = v.data
          this.stageMediumList = v.data
          //计算全部阶段数量 金额
          this.computeMaxAllStage()
          this.computeMaxNumChange()
          this.computeMaxSumChange()
          //计算阶段
          this.computeStageSales()
          this.computeAllStage()
          this.computeNumChange()
          this.computeSumChange()
          //计算员工阶段数量 金额
          this.computeMediumAllStage()
          this.computeMediumNumChange()
          this.computeMediumSumChange()
        })
        .catch(function (v) {})
    },
    //模糊查询员工
    findEmp(){
      this.visible = true
      this.$axios.get('http://localhost:8088/emp-fuzzy-list',{
        params: {
          empName: this.empValue
        }
      })
        .then(v => {
         this.empList = v.data
        })
          .catch(function (v) {})
    },
    // 模糊选择员工
    choiceEmp(val){
      this.emp = val
      this.empValue = val.empName
      this.visible = false
    },
    // 关闭模糊查询结果
    closeEmp(){
      this.visible = false
      this.empValue = ''
    },
    // 查询所有员工
    findAllEmp(currPage,pageSize){
      this.innerDialog = true
      this.$axios.get('http://localhost:8088/emp-list-lj',{params: {
          page: currPage,
          size: pageSize,
        }
      })
        .then(v => {
          this.empList2 = v.data.rows
          this.totalSize = v.data.total
        })
        .catch(function (v) {})
    },
    //员工分页
    changePage (val) {
      // val就是当前页码
      this.findAllEmp(val, this.pageSize)
    },
    //选择员工
    choiceCustomer2(val){
      this.emp = val
      this.empValue = val.empName
      this.innerDialog = false
    },
    // 计算漏斗data
    computeStageSales(){
      for(let i=0;i<this.stageList.length;i++) {
        if (this.stageList[i].datas === 1){
          this.stageDataList.push('初期沟通');
          this.stageJsonNumList.push({value:this.stageList[i].num,name:'初期沟通'})
          this.stageJsonSumList.push({value:this.stageList[i].sum,name:'初期沟通'})
        } else if (this.stageList[i].datas === 2){
          this.stageDataList.push('立体评估');
          this.stageJsonNumList.push({value:this.stageList[i].num,name:'立体评估'})
          this.stageJsonSumList.push({value:this.stageList[i].sum,name:'立体评估'})
        }else if (this.stageList[i].datas === 3){
          this.stageDataList.push('需求分析');
          this.stageJsonNumList.push({value:this.stageList[i].num,name:'需求分析'})
          this.stageJsonSumList.push({value:this.stageList[i].sum,name:'需求分析'})
        }else if (this.stageList[i].datas === 4){
          this.stageDataList.push('方案制定');
          this.stageJsonNumList.push({value:this.stageList[i].num,name:'方案制定'})
          this.stageJsonSumList.push({value:this.stageList[i].sum,name:'方案制定'})
        }else if (this.stageList[i].datas === 5){
          this.stageDataList.push('竞争');
          this.stageJsonNumList.push({value:this.stageList[i].num,name:'竞争'})
          this.stageJsonSumList.push({value:this.stageList[i].sum,name:'竞争'})
        }else if (this.stageList[i].datas === 6){
          this.stageDataList.push('商务谈判');
          this.stageJsonNumList.push({value:this.stageList[i].num,name:'商务谈判'})
          this.stageJsonSumList.push({value:this.stageList[i].sum,name:'商务谈判'})
        }else if (this.stageList[i].datas === 7){
          this.stageDataList.push('合同签约');
          this.stageJsonNumList.push({value:this.stageList[i].num,name:'合同签约'})
          this.stageJsonSumList.push({value:this.stageList[i].sum,name:'合同签约'})
        }
      }
    },
    // 计算员工部门或者员工 状态=跟踪的阶段数量 金额
    computeAllStage(){
      for(let i=0;i<this.stageList.length;i++) {
        if (this.stageList[i].datas == 1){
          this.tableData[0].num = this.stageList[i].num
          if (this.stageList[i].sum == undefined){
            this.tableData[0].sum = 0
          }else {
            this.tableData[0].sum = this.stageList[i].sum
          }
          this.tableData[0].expectSum = this.percent(this.stageList[i].sum)
        } else if (this.stageList[i].datas == 2){
          this.tableData[1].num = this.stageList[i].num
          if (this.stageList[i].sum == undefined){
            this.tableData[1].sum = 0
          }else {
            this.tableData[1].sum = this.stageList[i].sum
          }
          this.tableData[1].expectSum = this.percent(this.stageList[i].sum)
        }else if (this.stageList[i].datas == 3){
          this.tableData[2].num = this.stageList[i].num
          if (this.stageList[i].sum == undefined){
            this.tableData[2].sum = 0
          }else {
            this.tableData[2].sum = this.stageList[i].sum
          }
          this.tableData[2].expectSum = this.percent(this.stageList[i].sum)
        }else if (this.stageList[i].datas == 4){
          this.tableData[3].num = this.stageList[i].num
          if (this.stageList[i].sum == undefined){
            this.tableData[3].sum = 0
          }else {
            this.tableData[3].sum = this.stageList[i].sum
          }
          this.tableData[3].expectSum = this.percent(this.stageList[i].sum)
        }else if (this.stageList[i].datas == 5){
          this.tableData[4].num = this.stageList[i].num
          if (this.stageList[i].sum == undefined){
            this.tableData[4].sum = 0
          }else {
            this.tableData[4].sum = this.stageList[i].sum
          }
          this.tableData[4].expectSum = this.percent(this.stageList[i].sum)
        }else if (this.stageList[i].datas == 6){
          this.tableData[5].num = this.stageList[i].num
          if (this.stageList[i].sum == undefined){
            this.tableData[5].sum = 0
          }else {
            this.tableData[5].sum = this.stageList[i].sum
          }
          this.tableData[5].expectSum = this.percent(this.stageList[i].sum)
        }else if (this.stageList[i].datas == 7){
          this.tableData[6].num = this.stageList[i].num
          if (this.stageList[i].sum == undefined){
            this.tableData[6].sum = 0
          }else {
            this.tableData[6].sum = this.stageList[i].sum
          }
          this.tableData[6].expectSum = this.percent(this.stageList[i].sum)
        }
      }
    },
    // 计算转化
    computeNumChange(){
      if (this.tableData[0].num == 0){
        this.tableData[0].minChange = ''
      }else {
        let num = this.tableData[1].num/this.tableData[0].num
        this.tableData[0].minChange = this.toPercent(num)
      }
      if (this.tableData[1].num == 0){
        this.tableData[1].minChange = ''
      }else {
        let num = this.tableData[2].num/this.tableData[1].num
        this.tableData[1].minChange = this.toPercent(num)
      }
      if (this.tableData[2].num == 0){
        this.tableData[2].minChange = ''
      }else {
        let num = this.tableData[3].num/this.tableData[2].num
        this.tableData[2].minChange = this.toPercent(num)
      }
      if (this.tableData[3].num == 0){
        this.tableData[3].minChange = ''
      }else {
        let num = this.tableData[4].num/this.tableData[3].num
        this.tableData[3].minChange = this.toPercent(num)
      }
      if (this.tableData[4].num == 0){
        this.tableData[4].minChange = ''
      }else {
        let num = this.tableData[5].num/this.tableData[4].num
        this.tableData[4].minChange = this.toPercent(num)
      }
      if (this.tableData[5].num == 0){
        this.tableData[5].minChange = ''
      }else {
        let num = this.tableData[6].num/this.tableData[5].num
        this.tableData[5].minChange = this.toPercent(num)
      }
    },
    // 计算金额转化
    computeSumChange(){
      if (this.tableData[0].sum == 0){
        this.tableData[0].minSum= ''
      }else {
        let nums = this.tableData[1].sum/this.tableData[0].sum
        this.tableData[0].minSum= this.toPercent(nums)
      }
      if (this.tableData[1].sum == 0){
        this.tableData[1].minSum = ''
      }else {
        let nums = this.tableData[2].sum/this.tableData[1].sum
        this.tableData[1].minSum= this.toPercent(nums)
      }
      if (this.tableData[2].sum == 0){
        this.tableData[2].minSum = ''
      }else {
        let nums = this.tableData[3].sum/this.tableData[2].sum
        this.tableData[2].minSum= this.toPercent(nums)
      }
      if (this.tableData[3].sum == 0){
        this.tableData[3].minSum = ''
      }else {
        let nums = this.tableData[4].sum/this.tableData[3].sum
        this.tableData[3].minSum= this.toPercent(nums)
      }
      if (this.tableData[4].sum == 0){
        this.tableData[4].minSum = ''
      }else {
        let nums = this.tableData[5].sum/this.tableData[4].sum
        this.tableData[4].minSum= this.toPercent(nums)
      }
      if (this.tableData[5].sum == 0){
        this.tableData[5].minSum = ''
      }else {
        let nums = this.tableData[6].sum/this.tableData[5].sum
        this.tableData[5].minSum= this.toPercent(nums)
      }
    },
    // 计算员工部门或者员工 所有阶段数量 金额
    computeMediumAllStage(){
      for(let i=0;i<this.stageMediumList.length;i++) {
        if (this.stageMediumList[i].datas === 1){
          this.tableData[0].numMedium = this.stageMediumList[i].num
          if (this.stageMediumList[i].sum == undefined){
            this.tableData[0].sumMedium = 0
          }else {
            this.tableData[0].sumMedium = this.stageMediumList[i].sum
          }
        } else if (this.stageMediumList[i].datas === 2){
          this.tableData[1].numMedium = this.stageMediumList[i].num
          if (this.stageMediumList[i].sum == undefined){
            this.tableData[1].sumMedium = 0
          }else {
            this.tableData[1].sumMedium = this.stageMediumList[i].sum
          }
        }else if (this.stageMediumList[i].datas === 3){
          this.tableData[2].numMedium = this.stageMediumList[i].num
          if (this.stageMediumList[i].sum == undefined){
            this.tableData[2].sumMedium = 0
          }else {
            this.tableData[2].sumMedium = this.stageMediumList[i].sum
          }
        }else if (this.stageMediumList[i].datas === 4){
          this.tableData[3].numMedium = this.stageMediumList[i].num
          if (this.stageMediumList[i].sum == undefined){
            this.tableData[3].sumMedium = 0
          }else {
            this.tableData[3].sumMedium = this.stageMediumList[i].sum
          }
        }else if (this.stageMediumList[i].datas === 5){
          this.tableData[4].numMedium = this.stageMediumList[i].num
          if (this.stageMediumList[i].sum == undefined){
            this.tableData[4].sumMedium = 0
          }else {
            this.tableData[4].sumMedium = this.stageMediumList[i].sum
          }
        }else if (this.stageMediumList[i].datas === 6){
          this.tableData[5].numMedium = this.stageMediumList[i].num
          if (this.stageMediumList[i].sum == undefined){
            this.tableData[5].sumMedium = 0
          }else {
            this.tableData[5].sumMedium = this.stageMediumList[i].sum
          }
        }else if (this.stageMediumList[i].datas === 7){
          this.tableData[6].numMedium = this.stageMediumList[i].num
          if (this.stageMediumList[i].sum == undefined){
            this.tableData[6].sumMedium = 0
          }else {
            this.tableData[6].sumMedium = this.stageMediumList[i].sum
          }
        }
      }
    },
    // 计算历史转化
    computeMediumNumChange(){
      if (this.tableData[0].numMedium == 0){
        this.tableData[0].mediumChange = ''
      }else {
        let num = this.tableData[1].numMedium/this.tableData[0].numMedium
        this.tableData[0].mediumChange = this.toPercent(num)
      }
      if (this.tableData[1].numMedium == 0){
        this.tableData[1].mediumChange = ''
      }else {
        let num = this.tableData[2].numMedium/this.tableData[1].numMedium
        this.tableData[1].mediumChange = this.toPercent(num)
      }
      if (this.tableData[2].numMedium == 0){
        this.tableData[2].mediumChange = ''
      }else {
        let num = this.tableData[3].numMedium/this.tableData[2].numMedium
        this.tableData[2].mediumChange = this.toPercent(num)
      }
      if (this.tableData[3].numMedium == 0){
        this.tableData[3].mediumChange = ''
      }else {
        let num = this.tableData[4].numMedium/this.tableData[3].numMedium
        this.tableData[3].mediumChange = this.toPercent(num)
      }
      if (this.tableData[4].numMedium == 0){
        this.tableData[4].mediumChange = ''
      }else {
        let num = this.tableData[5].numMedium/this.tableData[4].numMedium
        this.tableData[4].mediumChange = this.toPercent(num)
      }
      if (this.tableData[5].numMedium == 0){
        this.tableData[5].mediumChange = ''
      }else {
        let num = this.tableData[6].numMedium/this.tableData[5].numMedium
        this.tableData[5].mediumChange = this.toPercent(num)
      }
    },
    // 计算历史金额转化
    computeMediumSumChange(){
      if (this.tableData[0].sumMedium == 0){
        this.tableData[0].mediumSum = ''
      }else {
        let nums = this.tableData[1].sumMedium/this.tableData[0].sumMedium
        this.tableData[0].mediumSum= this.toPercent(nums)
      }
      if (this.tableData[1].sumMedium == 0){
        this.tableData[1].mediumSum = ''
      }else {
        let nums = this.tableData[2].sumMedium/this.tableData[1].sumMedium
        this.tableData[1].mediumSum= this.toPercent(nums)
      }
      if (this.tableData[2].sumMedium == 0){
        this.tableData[2].mediumSum = ''
      }else {
        let nums = this.tableData[3].sumMedium/this.tableData[2].sumMedium
        this.tableData[2].mediumSum = this.toPercent(nums)
      }
      if (this.tableData[3].sumMedium == 0){
        this.tableData[3].mediumSum = ''
      }else {
        let nums = this.tableData[4].sumMedium/this.tableData[3].sumMedium
        this.tableData[3].mediumSum= this.toPercent(nums)
      }
      if (this.tableData[4].sumMedium == 0){
        this.tableData[4].mediumSum = ''
      }else {
        let nums = this.tableData[5].sumMedium/this.tableData[4].sumMedium
        this.tableData[4].mediumSum= this.toPercent(nums)
      }
      if (this.tableData[5].sumMedium == 0){
        this.tableData[5].mediumSum = ''
      }else {
        let nums = this.tableData[6].sumMedium/this.tableData[5].sumMedium
        this.tableData[5].mediumSum= this.toPercent(nums)
      }
    },
    // 计算所有阶段数量 金额
    computeMaxAllStage(){
      for(let i=0;i<this.stageMaxList.length;i++) {
        if (this.stageMaxList[i].datas == 1){
          this.tableData[0].numMax = this.stageMaxList[i].num
          if (this.stageMaxList[i].sum == undefined){
            this.tableData[0].sumMax = 0
          }else {
            this.tableData[0].sumMax = this.stageMaxList[i].sum
          }
        } else if (this.stageMaxList[i].datas == 2){
          this.tableData[1].numMax = this.stageMaxList[i].num
          if (this.stageMaxList[i].sum == undefined){
            this.tableData[1].sumMax = 0
          }else {
            this.tableData[1].sumMax = this.stageMaxList[i].sum
          }
        }else if (this.stageMaxList[i].datas == 3){
          this.tableData[2].numMax = this.stageMaxList[i].num
          if (this.stageMaxList[i].sum == undefined){
            this.tableData[2].sumMax = 0
          }else {
            this.tableData[2].sumMax = this.stageMaxList[i].sum
          }
        }else if (this.stageMaxList[i].datas == 4){
          this.tableData[3].numMax = this.stageMaxList[i].num
          if (this.stageMaxList[i].sum == undefined){
            this.tableData[3].sumMax = 0
          }else {
            this.tableData[3].sumMax = this.stageMaxList[i].sum
          }
        }else if (this.stageMaxList[i].datas == 5){
          this.tableData[4].numMax = this.stageMaxList[i].num
          if (this.stageMaxList[i].sum == undefined){
            this.tableData[4].sumMax = 0
          }else {
            this.tableData[4].sumMax = this.stageMaxList[i].sum
          }
        }else if (this.stageMaxList[i].datas == 6){
          this.tableData[5].numMax = this.stageMaxList[i].num
          if (this.stageMaxList[i].sum == undefined){
            this.tableData[5].sumMax = 0
          }else {
            this.tableData[5].sumMax = this.stageMaxList[i].sum
          }
        }else if (this.stageMaxList[i].datas == 7){
          this.tableData[6].numMax = this.stageMaxList[i].num
          if (this.stageMaxList[i].sum == undefined){
            this.tableData[6].sumMax = 0
          }else {
            this.tableData[6].sumMax = this.stageMaxList[i].sum
          }
        }
      }
    },
    // 计算平均转化
    computeMaxNumChange(){
      if (this.tableData[0].numMax == 0){
        this.tableData[0].maxChange = ''
      }else {
        let num = this.tableData[1].numMax/this.tableData[0].numMax
        this.tableData[0].maxChange = this.toPercent(num)
      }
      if (this.tableData[1].numMax == 0){
        this.tableData[1].maxChange = ''
      }else {
        let num = this.tableData[2].numMax/this.tableData[1].numMax
        this.tableData[1].maxChange = this.toPercent(num)
      }
      if (this.tableData[2].numMax == 0){
        this.tableData[2].maxChange = ''
      }else {
        let num = this.tableData[3].numMax/this.tableData[2].numMax
        this.tableData[2].maxChange = this.toPercent(num)
      }
      if (this.tableData[3].numMax == 0){
        this.tableData[3].maxChange = ''
      }else {
        let num = this.tableData[4].numMax/this.tableData[3].numMax
        this.tableData[3].maxChange = this.toPercent(num)
      }
      if (this.tableData[4].numMax == 0){
        this.tableData[4].maxChange = ''
      }else {
        let num = this.tableData[5].numMax/this.tableData[4].numMax
        this.tableData[4].maxChange = this.toPercent(num)
      }
      if (this.tableData[5].numMax == 0){
        this.tableData[5].maxChange = ''
      }else {
        let num = this.tableData[6].numMax/this.tableData[5].numMax
        this.tableData[5].maxChange = this.toPercent(num)
      }
    },
    // 计算平均金额转化
    computeMaxSumChange(){
      if (this.tableData[0].sumMax == 0){
        this.tableData[0].maxSum= ''
      }else {
        let nums = this.tableData[1].sumMax/this.tableData[0].sumMax
        this.tableData[0].maxSum= this.toPercent(nums)
      }
      if (this.tableData[1].sumMax == 0){
        this.tableData[1].maxSum = ''
      }else {
        let nums = this.tableData[2].sumMax/this.tableData[1].sumMax
        this.tableData[1].maxSum= this.toPercent(nums)
      }
      if (this.tableData[2].sumMax == 0){
        this.tableData[2].maxSum = ''
      }else {
        let nums = this.tableData[3].sumMax/this.tableData[2].sumMax
        this.tableData[2].maxSum= this.toPercent(nums)
      }
      if (this.tableData[3].sumMax == 0){
        this.tableData[3].maxSum = ''
      }else {
        let nums = this.tableData[4].sumMax/this.tableData[3].sumMax
        this.tableData[3].maxSum= this.toPercent(nums)
      }
      if (this.tableData[4].sumMax == 0){
        this.tableData[4].maxSum = ''
      }else {
        let nums = this.tableData[5].sumMax/this.tableData[4].sumMax
        this.tableData[4].maxSum= this.toPercent(nums)
      }
      if (this.tableData[5].sumMax == 0){
        this.tableData[5].maxSum = ''
      }else {
        let nums = this.tableData[6].sumMax/this.tableData[5].sumMax
        this.tableData[5].maxSum= this.toPercent(nums)
      }
    },
    // 阶段销售漏斗
    salesCharts(){
      let myChart = this.$echarts.init(this.$refs.salesChart);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          data: this.stageDataList
        },
        series: [
          {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: this.stageJsonNumList
          }
        ]
      })
    },
    // 阶段销售漏斗金额
    salesSumCharts(){
      let myChart = this.$echarts.init(this.$refs.salesSumChart);
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          data: this.stageDataList
        },
        series: [
          {
            name:'漏斗图',
            type:'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: this.stageJsonSumList
          }
        ]
      })
    },
    // 百分数
    toPercent(point) {
      // console.log(point)
      let percent = Number(point*100).toFixed(1);
      percent+="%";
      return percent;
    },
    // 万
    percent(point) {
      if (point == undefined){
        return '0万'
      }
      let percent = Number(point/10000).toFixed(2);
      percent+="万";
      return percent;
    }
  },
  created: function () {
    this.loginEmp()
    this.stageData()
    this.stageOtherData()
    this.stageMaxData()
    this.initAllData()
  },
  mounted () {

  },
  updated() {
    this.salesCharts()
    this.salesSumCharts()
  },
  watch:{
    stageList(val) {
      this.salesCharts()
      this.salesSumCharts()
    }
  }
}
</script>

<style>
  .font-16{
    font-size: 16px;
    padding: 0 10px;
  }
   .cu-ul{
    padding-left: 10px;
    margin: 0;
  }
  .cu-ul li{
     list-style-type:none;
     cursor:pointer;
   }
  .sales .el-popover{
    left: 132px;
  }
</style>
